<template>
    <div class="choose-wrap" :class="[{'disabled':disabled}]">
        <div class="choose" @click="showWrapper" >
            <span>{{value}}</span>
            <i class="el-icon-caret-bottom"></i>
            <div class='mt-content' :class="{'active':showWrapperActive}">
                <h2>{{title}}</h2>
                <div :class="[className]" class="wrapper">
                    <div class="col" v-for="(listData, index) in renderList" :key="index">
                        <span :class="{'mt-item': true, 'active': item.name == value}" v-for="(item, index) in listData" :key="index" @click.stop="changeValue(item)">{{item.name}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>



<script>
export default {
  props: [
    'list',
    'title',
    'value',
    'className',
    "showWrapperActive",
    'disabled'
  ],
  computed: {
    renderList: function () {
      const col = Math.ceil(this.list.length / 12)
      const resultList = []
      for (var i = 0; i < col; i++) {
        const data = this.list.slice(i * 12, i * 12 + 12)
        resultList.push(data)
      }
      return resultList
    }
  },

  methods: {
    showWrapper (e) {
      e.stopPropagation()
      this.$emit('change_active', true)
    },
    changeValue (item) {
      this.$emit('change', item);    
    }
  }
}
</script>
<style lang="scss">
    @import "@/assets/css/changecity/select.scss";
</style>
